<template>
    <div class="login-page">
        <vue-particles id="tsparticles" :options="particlesOptions" />
        <div class="login-box">
            <div class="login-box-title">
                <h1>欢迎注册</h1>
                <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" @keyup.enter="onRegister">
                    <el-form-item prop="username">
                        <el-input v-model.trim="loginForm.username" placeholder="请输入用户名">
                            <template #prepend>
                                <el-icon>
                                    <User />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model.trim="loginForm.password" placeholder="请输入密码" show-password>
                            <template #prepend>
                                <el-icon>
                                    <Lock />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-button type="primary" @click="onRegister">注册</el-button>
                    <!-- 注册 -->
                    <div class="login-register" @click="goLogin">
                        已有帐号去登陆
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { getRegister } from '@/api/index'

import particlesConfig from "@/utils/particles";
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
// 路由
import router from '@/router/index';

const particlesOptions = ref(particlesConfig);
const loginFormRef = ref<FormInstance>();
// 定义表单数据类型
interface LoginForm {
    username: string;
    password: string;
}
// 登录表单
const loginForm = reactive<LoginForm>({
    username: '',
    password: ''
});
// 登录表单验证规则
const loginRules = reactive<FormRules<LoginForm>>({
    username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
    password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
})

// 注册
const onRegister = () => {
    loginFormRef.value?.validate((valid) => {
        if (valid) {
            getRegisterData()
        }
    })
};
// 登录接口
const getRegisterData = async () => {
    const res = await getRegister(loginForm)
    console.log(res, 'res')
    if (res?.code == 0) {
        ElMessage.success(res.title);
        router.push('/login')
    }
}
//注册
const goLogin = () => {
    router.push('/login')
}
</script>
<style lang="less">
@import '@/common/login.less';
</style>